import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const TrafficCapacityChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'TrafficCapacityChart',
  title: '各类交通方式小时运力图',
  category: '图表',
  group: '首页',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'TrafficCapacityChart',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'width',
      propType: 'number',
      description: '图表宽度'
    },
    {
      name: 'height',
      propType: 'number',
      description: '图表高度'
    },
    {
      name: 'series',
      propType: 'arrayOf',
      description: '数据系列'
    },
    {
      name: 'backgroundColor',
      propType: 'string',
      description: '背景颜色'
    },
    {
      name: 'gridColor',
      propType: 'string',
      description: '网格颜色'
    },
    {
      name: 'textColor',
      propType: 'string',
      description: '文字颜色'
    },
    {
      name: 'showGrid',
      propType: 'bool',
      description: '显示网格'
    },
    {
      name: 'showLegend',
      propType: 'bool',
      description: '显示图例'
    },
    {
      name: 'legendPosition',
      propType: 'oneOf',
      description: '图例位置'
    },
    {
      name: 'xAxisLabel',
      propType: 'string',
      description: 'X轴标题'
    },
    {
      name: 'yAxisLabel',
      propType: 'string',
      description: 'Y轴标题'
    },
    {
      name: 'minY',
      propType: 'number',
      description: 'Y轴最小值'
    },
    {
      name: 'maxY',
      propType: 'number',
      description: 'Y轴最大值'
    },
    {
      name: 'stepY',
      propType: 'number',
      description: 'Y轴步长'
    },
    {
      name: 'theme',
      propType: 'oneOf',
      description: '主题'
    },
    {
      name: 'onClick',
      propType: 'func',
      description: '点击事件'
    }
  ],
  configure: {
    props: [
      // 基础配置
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础配置',
        },
        items: [
          {
            name: 'width',
            title: {
              label: '宽度',
              tip: '图表宽度(px)'
            },
            setter: 'NumberSetter'
          },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '图表高度(px)'
            },
            setter: 'NumberSetter'
          },
          {
            name: 'theme',
            title: {
              label: '主题',
              tip: '图表主题样式'
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { title: '深色', value: 'dark' },
                  { title: '浅色', value: 'light' }
                ]
              }
            }
          }
        ]
      },
      // 数据配置
      {
        name: 'data',
        type: 'group',
        display: 'accordion',
        title: {
          label: '数据配置',
        },
        items: [
          {
            name: 'series',
            title: {
              label: '数据系列',
              tip: '各交通方式的运力数据'
            },
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    config: {
                      items: [
                        {
                          name: 'name',
                          title: '名称',
                          setter: 'StringSetter'
                        },
                        {
                          name: 'color',
                          title: '颜色',
                          setter: 'ColorSetter'
                        },
                        {
                          name: 'data',
                          title: '数据',
                          setter: {
                            componentName: 'ArraySetter',
                            props: {
                              itemSetter: {
                                componentName: 'ObjectSetter',
                                props: {
                                  config: {
                                    items: [
                                      {
                                        name: 'time',
                                        title: '时间',
                                        setter: 'StringSetter'
                                      },
                                      {
                                        name: 'value',
                                        title: '数值',
                                        setter: 'NumberSetter'
                                      }
                                    ]
                                  }
                                }
                              }
                            }
                          }
                        },
                        {
                          name: 'lineWidth',
                          title: '线宽',
                          setter: 'NumberSetter'
                        },
                        {
                          name: 'showDots',
                          title: '显示点',
                          setter: 'BoolSetter'
                        }
                      ]
                    }
                  }
                }
              }
            }
          }
        ]
      },
      // 显示配置
      {
        name: 'display',
        type: 'group',
        display: 'accordion',
        title: {
          label: '显示配置',
        },
        items: [
          {
            name: 'showGrid',
            title: {
              label: '显示网格',
              tip: '是否显示网格线'
            },
            setter: 'BoolSetter'
          },
          {
            name: 'showLegend',
            title: {
              label: '显示图例',
              tip: '是否显示图例'
            },
            setter: 'BoolSetter'
          },
          {
            name: 'legendPosition',
            title: {
              label: '图例位置',
              tip: '图例显示位置'
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  { title: '顶部', value: 'top' },
                  { title: '底部', value: 'bottom' },
                  { title: '左侧', value: 'left' },
                  { title: '右侧', value: 'right' }
                ]
              }
            }
          }
        ]
      },
      // 坐标轴配置
      {
        name: 'axis',
        type: 'group',
        display: 'accordion',
        title: {
          label: '坐标轴配置',
        },
        items: [
          {
            name: 'xAxisLabel',
            title: {
              label: 'X轴标题',
              tip: 'X轴标题文字'
            },
            setter: 'StringSetter'
          },
          {
            name: 'yAxisLabel',
            title: {
              label: 'Y轴标题',
              tip: 'Y轴标题文字'
            },
            setter: 'StringSetter'
          },
          {
            name: 'minY',
            title: {
              label: 'Y轴最小值',
              tip: 'Y轴最小值'
            },
            setter: 'NumberSetter'
          },
          {
            name: 'maxY',
            title: {
              label: 'Y轴最大值',
              tip: 'Y轴最大值'
            },
            setter: 'NumberSetter'
          },
          {
            name: 'stepY',
            title: {
              label: 'Y轴步长',
              tip: 'Y轴刻度步长'
            },
            setter: 'NumberSetter'
          }
        ]
      },
      // 颜色配置
      {
        name: 'colors',
        type: 'group',
        display: 'accordion',
        title: {
          label: '颜色配置',
        },
        items: [
          {
            name: 'backgroundColor',
            title: {
              label: '背景颜色',
              tip: '图表背景颜色'
            },
            setter: 'ColorSetter'
          },
          {
            name: 'gridColor',
            title: {
              label: '网格颜色',
              tip: '网格线颜色'
            },
            setter: 'ColorSetter'
          },
          {
            name: 'textColor',
            title: {
              label: '文字颜色',
              tip: '文字颜色'
            },
            setter: 'ColorSetter'
          }
        ]
      },
      // 样式配置
      {
        name: 'style',
        type: 'group',
        display: 'accordion',
        title: {
          label: '样式配置',
        },
        items: [
          {
            name: 'className',
            title: {
              label: '自定义类名',
              tip: '自定义CSS类名'
            },
            setter: 'StringSetter'
          },
          {
            name: 'style',
            title: {
              label: '自定义样式',
              tip: '自定义CSS样式'
            },
            setter: 'StyleSetter'
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
      events: ['onClick']
    },
    component: {}
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '各类交通方式小时运力图',
    screenshot: '',
    schema: {
      componentName: 'TrafficCapacityChart',
      props: {
        width: 462,
        height: 318,
        theme: 'dark',
        showGrid: true,
        showLegend: true,
        legendPosition: 'top',
        xAxisLabel: '时间',
        yAxisLabel: '运力(人次)',
        stepY: 100000,
        backgroundColor: 'rgba(15, 35, 65, 0.95)',
        series: [
          {
            name: '铁路',
            color: '#FF6B6B',
            data: [
              { time: '06:00', value: 450000 },
              { time: '07:00', value: 520000 },
              { time: '08:00', value: 580000 },
              { time: '09:00', value: 550000 },
              { time: '10:00', value: 500000 },
              { time: '11:00', value: 480000 },
              { time: '12:00', value: 520000 },
              { time: '13:00', value: 560000 },
              { time: '14:00', value: 580000 },
              { time: '15:00', value: 620000 },
              { time: '16:00', value: 650000 },
              { time: '17:00', value: 680000 },
              { time: '18:00', value: 620000 },
              { time: '19:00', value: 560000 },
              { time: '20:00', value: 500000 },
              { time: '21:00', value: 460000 },
              { time: '22:00', value: 420000 },
              { time: '23:00', value: 380000 }
            ]
          },
          {
            name: '地铁',
            color: '#4ECDC4',
            data: [
              { time: '06:00', value: 280000 },
              { time: '07:00', value: 350000 },
              { time: '08:00', value: 400000 },
              { time: '09:00', value: 380000 },
              { time: '10:00', value: 340000 },
              { time: '11:00', value: 320000 },
              { time: '12:00', value: 360000 },
              { time: '13:00', value: 390000 },
              { time: '14:00', value: 410000 },
              { time: '15:00', value: 430000 },
              { time: '16:00', value: 450000 },
              { time: '17:00', value: 480000 },
              { time: '18:00', value: 420000 },
              { time: '19:00', value: 380000 },
              { time: '20:00', value: 340000 },
              { time: '21:00', value: 300000 },
              { time: '22:00', value: 280000 },
              { time: '23:00', value: 250000 }
            ]
          },
          {
            name: '公交',
            color: '#45B7D1',
            data: [
              { time: '06:00', value: 180000 },
              { time: '07:00', value: 250000 },
              { time: '08:00', value: 300000 },
              { time: '09:00', value: 280000 },
              { time: '10:00', value: 240000 },
              { time: '11:00', value: 220000 },
              { time: '12:00', value: 260000 },
              { time: '13:00', value: 290000 },
              { time: '14:00', value: 310000 },
              { time: '15:00', value: 330000 },
              { time: '16:00', value: 350000 },
              { time: '17:00', value: 380000 },
              { time: '18:00', value: 320000 },
              { time: '19:00', value: 280000 },
              { time: '20:00', value: 240000 },
              { time: '21:00', value: 200000 },
              { time: '22:00', value: 180000 },
              { time: '23:00', value: 160000 }
            ]
          },
          {
            name: '出租车',
            color: '#F7DC6F',
            data: [
              { time: '06:00', value: 120000 },
              { time: '07:00', value: 180000 },
              { time: '08:00', value: 220000 },
              { time: '09:00', value: 200000 },
              { time: '10:00', value: 170000 },
              { time: '11:00', value: 150000 },
              { time: '12:00', value: 190000 },
              { time: '13:00', value: 210000 },
              { time: '14:00', value: 230000 },
              { time: '15:00', value: 250000 },
              { time: '16:00', value: 270000 },
              { time: '17:00', value: 290000 },
              { time: '18:00', value: 240000 },
              { time: '19:00', value: 200000 },
              { time: '20:00', value: 180000 },
              { time: '21:00', value: 160000 },
              { time: '22:00', value: 140000 },
              { time: '23:00', value: 120000 }
            ]
          },
          {
            name: '网约车',
            color: '#9B59B6',
            data: [
              { time: '06:00', value: 80000 },
              { time: '07:00', value: 140000 },
              { time: '08:00', value: 180000 },
              { time: '09:00', value: 160000 },
              { time: '10:00', value: 130000 },
              { time: '11:00', value: 120000 },
              { time: '12:00', value: 150000 },
              { time: '13:00', value: 170000 },
              { time: '14:00', value: 190000 },
              { time: '15:00', value: 210000 },
              { time: '16:00', value: 230000 },
              { time: '17:00', value: 250000 },
              { time: '18:00', value: 200000 },
              { time: '19:00', value: 170000 },
              { time: '20:00', value: 150000 },
              { time: '21:00', value: 130000 },
              { time: '22:00', value: 110000 },
              { time: '23:00', value: 90000 }
            ]
          }
        ]
      }
    }
  }
];

export default {
  ...TrafficCapacityChartMeta,
  snippets
};
